<template>
    <div class="main user-access-list">
        <div class="tool-bar">
            <el-button type="success" icon="el-icon-plus" class="fr" @click="showAdd">新建一级资源</el-button>
        </div>
        <tree-table :data="list" :columns="columns" :evalArgs="args" :expandAll="true" border>
            <el-table-column align="center" label="资源类型" width="80">
                <template slot-scope="scope">
                    <span v-text="types[scope.row.type]"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="URL路径" width="200">
                <template slot-scope="scope">
                    <div class="text-justify">
                        <p v-text="scope.row.url"></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="权限字符串" width="200">
                <template slot-scope="scope">
                    <div class="text-justify">
                        <p v-text="scope.row.permission"></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="270">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="showAdd(scope.row)" v-if="scope.row._level < 3">新建子资源</el-button>
                    <el-button type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </tree-table>
        <el-dialog :title="editItem.id ? '编辑资源' : '新建资源'" :visible.sync="showEditPop">
            <el-form :model="editItem" :rules="editRule" size="medium" ref="editItem" label-width="120px">
                <el-form-item label="资源名称:" prop="name">
                    <el-input v-model="editItem.name"></el-input>
                </el-form-item>
                <el-form-item label="上级资源:">
                    <span v-text="editItem.parentName"></span>
                </el-form-item>
                <el-form-item label="资源类型:">
                    <el-radio v-for="(name, val) in types" v-model="editItem.type" :key="val" :label="val">{{name}}</el-radio>
                </el-form-item>
                <el-form-item label="URL路径:">
                    <el-input v-model="editItem.url"></el-input>
                </el-form-item>
                <el-form-item label="权限字符串:">
                    <el-input v-model="editItem.permission"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                <el-button @click="showEditPop = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import treeTable from '@/components/TreeTable'
    import {nestArray} from '../../../utils/tools'
    import {getUserAccessList} from '../../../api/common'

    export default {
        name: 'userAccessList',
        data() {
            return {
                list: [],
                idObj: {},
                columns: [
                    {
                        text: '资源名称',
                        value: 'name'
                    },
                ],
                args: [null, null, 'name'],
                params: {
                    name: ''
                },
                query: {},
                page: 1,
                pageSize: 20,
                total: 0,
                editItem: {},
                editRule: {
                    name: [
                        {required: true, message: '不能为空', trigger: 'change'},
                        {max: 100, message: '不能超过100字符', trigger: 'change'},
                        {pattern: /[\a-zA-Z0-9\u4e00-\u9FA5]+$/, message: '不能含有特殊字符', trigger: 'change'},
                    ]
                },
                types: {
                    menu: '菜单',
                    button: '按钮'
                },
                showEditPop: false,
                listLoading: false,
                btnDisabled: false,
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true;
                getUserAccessList().then(({data}) => {
                    let arr = data ? data : [];
                    for (let item of arr) {
                        this.idObj[item.id] = item;
                    }
                    this.list = nestArray(arr, 0, 'parentId', 'id');
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.idObj = {};
                    this.listLoading = false;
                });
            },
            // 删除
            del(item) {
                this.$confirm(`确定要删除 ${item.name} ${item.children && item.children.length > 0 ? '及其子资源' : ''}吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.request({
                        url: '/bsnl-authority/resource/delete',
                        method: 'post',
                        data: {
                            id: item.id
                        }
                    }).then(() => {
                        this.$message.success('删除成功');
                        this.getList();
                    });
                }).catch(err => {
                    console.log(err);
                });
            },
            // 显示新建
            showAdd(item) {
                this.editItem = {
                    name: '',
                    parentId: 0,
                    parentName: '顶级资源',
                    type: 'menu',
                    url: '',
                    permission: '',
                };
                if (item && item.id) {
                    this.editItem.parentId = item.id;
                    this.editItem.parentName = item.name;
                }
                this.showEditPop = true;
            },
            // 显示编辑
            showEdit(item) {
                this.editItem = {...item};
                this.editItem.parentName = item && item.parentId ? this.idObj[item.parentId].name : '顶级资源';
                this.showEditPop = true;
            },
            // 保存
            save() {
                this.$refs.editItem.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    const {id, name, parentId, parentName, type, url, permission} = this.editItem;
                    let reqUrl = id ? '/bsnl-authority/resource/update' : '/bsnl-authority/resource/create';
                    this.btnDisabled = true;
                    this.request({
                        url: reqUrl,
                        method: 'post',
                        data: {
                            id,
                            name,
                            parentId,
                            parentName,
                            type,
                            url,
                            permission,
                            deleteFlag: 1
                        }
                    }).then(() => {
                        this.btnDisabled = false;
                        this.editItem = {};
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        console.log(err);
                        this.btnDisabled = false;
                    });
                });
            },
        },
        components: {
            treeTable
        }
    }
</script>
